<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-same-different-image.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css" />
    <style>
      img {
        width: 300px;
      }
    </style>
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var preload = {
      type: jsPsychPreload,
      auto_preload: true
    };

    var trial = {
      type: jsPsychSameDifferentImage,
      stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
      prompt: "<p>Press 's' if the faces had the same emotional expression. Press 'd' if the faces had different emotional expressions.</p>",
      same_key: 's',
      different_key: 'd',
      answer: 'different'
    };

    jsPsych.run([preload, trial]);  

  </script>
</html>
